<template>
    <el-container class="course-selection-home-page">
        <el-header height="auto">
            <Headers/>
        </el-header>
        <el-main>
            <div class="flex flex-col h-full">
                <div class="content">
                    <div class="banner">
                        <img class="" src="@/assets/images/course/banner.jpg" alt="">
                        <div class="box">
                            <p class="t-title">为研发团队选课</p>
                            <p class="b-title">基于关键研发角色方向以及 {{ themeCount }} 个细分工作场景主题</p>
                        </div>
                    </div>

                    <div class="plan">
                        <p class="title text-center font-bold">简单3步，完成你的选课计划</p>
                        <p class="desc text-center font-bold">
                            通过勾选角色方向以及工作场景主题，获得来自专家梳理的学习建议和选课计划清单。
                        </p>
                        <div class="steps flex justify-center">
                            <div class="step">
                                <div class="step-num active">1</div>
                                <div class="step-content">
                                    <div class="step-title">选择一个角色或方向</div>
                                    <div class="step-desc">确定一个你想学习的岗位角色或方向</div>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="step">
                                <div class="step-num">2</div>
                                <div class="step-content">
                                    <div class="step-title">选择想学的主题</div>
                                    <div class="step-desc">基于工作场景学习，选择1个或多个想学习的工作场景或工作挑战</div>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="step">
                                <div class="step-num">3</div>
                                <div class="step-content">
                                    <div class="step-title">获得你的团队学习提案</div>
                                    <div class="step-desc">基于你选的主题，获得来自专家总结的学习建议</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="course">
                        <p class="title">选择一个角色或方向</p>
                        <div class="content flex flex-wrap">
                            <div
                                @click="onNext(item.id, item.theme)"
                                class="item cursor-pointer"
                                v-for="item in themeList" :key="item.id">
                                <div class="item-content" :style="`background-color: ${item.color || '#b69cc7'};`">
                                    <p class="item-title">{{ item.theme }}</p>
                                    <img class="line" src="@/assets/images/course/line.svg"/>
                                    <p class="item-desc">{{ item.count }}个工作场景</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <Footers class="mt-auto"/>
            </div>
        </el-main>
        <div class="router-view" v-if="$route.name !== 'Course.Selection'">
            <router-view></router-view>
        </div>
    </el-container>
</template>

<script>
import {
    Container,
    Header,
    Main,
} from 'element-ui';
import Headers from '@/components/layout/Header';
import Footers from '@/components/layout/Footer';

export default {
    components: {
        ElContainer: Container,
        ElHeader: Header,
        ElMain: Main,
        Headers,
        Footers,
    },
    data() {
        return {
            themeList: [],
            themeCount: 0,
        };
    },
    methods: {
        fetchList() {
            API.get('../elective').then(res => {
                this.themeList = res || [];
            });
        },
        getThemeCount() {
            API.put('../elective/banner').then(res => {
                this.themeCount = res.amount;
            });
        },

        onNext(id, theme) {
            this.$router.push({
                name: 'Course.Selection.Detail',
                query: {
                    id,
                    theme,
                },
            });
        },
    },
    mounted() {
        this.fetchList();
        this.getThemeCount();
    },
};
</script>

<style lang="scss" scoped>
.course-selection-home-page {
    width: 100vw;
    height: 100vh;

    .el-main {
        padding: 0;
    }

    .el-header {
        box-shadow: 1px 1px 10px 1px rgba($color: #000000, $alpha: .1);

        @media (max-width: 960px) {
            padding: 0;
        }
    }

    .banner {
        position: relative;
        height: 460px;

        @media (max-width: 960px) {
            height: 32vw;
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .box {
            position: relative;
            width: 1024px;
            margin: 0 auto;
            padding-top: 178px;
            color: white;

            @media (max-width: 960px) {
                width: initial;
                height: 100%;
                padding: 0 24px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .t-title {
                font-size: 50px;
                font-weight: bold;
                margin-bottom: 10px;

                @media (max-width: 960px) {
                    font-size: 24px;
                    line-height: 33px;
                    margin-bottom: 0;
                }
            }

            .b-title {
                font-size: 24px;
                letter-spacing: 5px;

                @media (max-width: 960px) {
                    font-size: 14px;
                    line-height: 20px;
                    letter-spacing: initial;
                }
            }
        }
    }

    .plan {
        max-width: 1024px;
        margin: 70px auto 0 auto;

        @media (max-width: 960px) {
            margin: 0;
            padding: 20px 20px 0;
        }

        .title {
            font-size: 30px;
            color: rgb(37, 37, 37);

            @media (max-width: 960px) {
                font-size: 20px;
                line-height: 28px;
            }
        }

        .desc {
            color: rgb(180, 180, 180);
            margin-top: 15px;

            @media (max-width: 960px) {
                font-size: 12px;
                font-weight: normal;
                line-height: 17px;
                margin-top: 8px;
            }
        }

        .steps {
            position: relative;
            margin-top: 60px;
            padding-bottom: 180px;

            @media (max-width: 960px) {
                margin-top: 50px;
                padding-bottom: 0;
                flex-direction: column;

                &::before {
                    content: "";
                    position: absolute;
                    top: 50px;
                    bottom: 94px;
                    left: 24px;
                    border-left: 1px dashed rgb(215, 215, 215);
                    z-index: -1;
                }
            }

            .step {
                position: relative;

                @media (max-width: 960px) {
                    display: flex;
                }

                .step-num {
                    width: 60px;
                    height: 60px;
                    line-height: 60px;
                    border-radius: 50%;
                    border: 1px solid rgb(215, 215, 215);
                    text-align: center;
                    font-size: 30px;
                    font-weight: bold;
                    color: rgb(215, 215, 215);

                    @media (max-width: 960px) {
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        font-size: 25px;
                        flex-shrink: 0;
                        margin-right: 19px;
                        background-color: white;
                        margin-bottom: 44px;
                    }
                }

                .step-num.active {
                    border-color: #2d70ae;
                    color: #2d70ae;
                }

                .step-content {
                    position: absolute;
                    top: 85px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 260px;
                    text-align: center;

                    @media (max-width: 960px) {
                        position: initial;
                        top: initial;
                        left: initial;
                        transform: none;
                        width: initial;
                        text-align: left;
                        padding-top: 3px;
                    }

                    .step-title {
                        font-size: 20px;
                        font-weight: bold;

                        @media (max-width: 960px) {
                            font-size: 16px;
                            line-height: 22px;
                        }
                    }

                    .step-desc {
                        margin-top: 17px;
                        font-size: 14px;
                        line-height: 24px;
                        color: rgb(74, 74, 74);

                        @media (max-width: 960px) {
                            font-size: 12px;
                            line-height: 18px;
                            margin-top: 7px;
                        }
                    }
                }
            }

            .line {
                width: 225px;
                margin: 29px 16px 0 16px;
                border-top: 2px dashed rgb(215, 215, 215);

                @media (max-width: 960px) {
                    display: none;
                }
            }
        }
    }

    .course {
        max-width: 1024px;
        margin: 0 auto;
        margin-top: 60px;
        padding-bottom: 90px;

        @media (max-width: 960px) {
            margin-top: 12px;
            padding: 0 20px 11px;
        }

        .title {
            font-size: 30px;
            text-align: center;
            color: rgb(37, 37, 37);
            margin-bottom: 30px;

            @media (max-width: 960px) {
                font-size: 20px;
                font-weight: bold;
                line-height: 28px;
                margin-bottom: 33px;
            }
        }

        .content {
            width: 100%;

            @media (max-width: 960px) {
                justify-content: space-between;
            }

            .item {
                position: relative;
                min-width: 333px;
                height: 200px;
                padding-top: 30px;
                box-sizing: border-box;
                margin-bottom: 24px;

                @media (max-width: 960px) {
                    width: 48%;
                    height: initial;
                    padding: 0;
                    margin-bottom: 10px;
                }
            }

            .item:nth-child(3n-1) {
                margin: 0 12px 24px 12px;

                @media (max-width: 960px) {
                    margin:  0 0 10px;
                }
            }

            .icon {
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -45px;
                width: 90px;
                height: 90px;
                border: 4px solid #b69cc7;
                border-radius: 50%;

                img {
                    object-fit: cover;
                    border-radius: 50%;
                }
            }

            .item-content {
                width: 100%;
                height: 100%;
                padding-top: 42px;
                background: #b69cc7;
                text-align: center;
                color: white;
                border-radius: 5px;

                @media (max-width: 960px) {
                    padding: 15px 0 17px;
                }

                .item-title {
                    padding: 0 10px;
                    box-sizing: border-box;
                    font-size: 32px;
                    font-weight: bold;

                    @media (max-width: 960px) {
                        font-size: 16px;
                        line-height: 22px;
                    }
                }

                .item-desc {
                    @media (max-width: 960px) {
                        font-size: 12px;
                        line-height: 17px;
                    }
                }

                .line {
                    margin: 8px auto 12px;

                    @media (max-width: 960px) {
                        width: 67.5%;
                    }
                }
            }
        }
    }

    .router-view {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
    }
}
</style>
